<template>
  <div class="login">
    <img class="bgCircle2" src="./img/bgCircle2.png" />
    <img class="bgCircle3" src="./img/bgCircle3.png" />
    <img class="bgCircle4" src="./img/bgCircle4.png" />
    <div class="content">
      <div class="bidTitle">XX科技中台管理登录</div>
      <div class="logCon">
        <el-form
          ref="form"
          label-position="right"
          label-width="100px"
          :model="form"
          :rules="rules"
        >
          <el-form-item label="账号" prop="username">
            <el-input class="bt_input" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input class="bt_input" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="button" class="logingBut" @click="submit"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/apis/login";
const reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/;
const newPass = (rule, value, callback) => {
  // if (!reg.test(value)) {
  //   callback(new Error("密码应是6-12位数字、字母或字符！"));
  // } else {
  //   callback();
  // }
  callback();
};
export default {
  name: "Login",
  data() {
    return {
      form: {
        password: "123456",
        username: "admin",
      },
      rules: {
        username: [
          { required: true, message: "账户名不可为空" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: "姓名不支持特殊字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不可为空" },
          { validator: newPass, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            const data = await login({ ...this.form });
            if (data.status === 200) {
              this.$message.success("登录成功");
              const token = data.token;
              this.$store.dispatch("user/setToken", token);
              // 登录成功后跳转到 school页面
              this.$router.replace("/school");
            }
          } catch (err) {
            console.error(err);
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  height: 100vh;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background-image: url(./img/bigBg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  .content {
    width: 42%;
    position: fixed;
    min-width: 600px;
    background: #ffffff57;
    left: 29%;
    padding: 5% 1%;
    margin-top: 12%;
    text-align: center;
    border-radius: 5px;
    .bidTitle {
      color: #1b1d50;
      font-size: 31px;
      font-weight: 600;
    }
    .logCon {
      margin-top: 40px;
      /deep/.el-form-item__label {
        position: relative;
        left: 40px;
        color: #ffffff;
        font-size: 18px;
      }
      /deep/ .el-form-item__error {
        left: 45px;
      }
    }
    .bt_input {
      border-radius: 2px;
      border: none;
      width: 330px;
      margin-right: 100px;
      color: #333;
      background: #ffffffd9;
    }

    .logingBut {
      background: #1b1d50;
      border: none;
      padding: 12px 0px;
      margin-right: 100px;
      color: #edefee;
      border-radius: 2px;
      width: 330px;
      margin-top: 5px;
    }
  }
  .bgCircle2 {
    width: 55%;
    position: fixed;
    top: 68%;
    left: 23%;
    animation: rotate 60s linear 0s infinite;
  }

  .bgCircle3 {
    width: 50%;
    position: fixed;
    top: 70%;
    left: 25%;
    animation: rotateReverse 60s linear 0s infinite;
  }

  .bgCircle4 {
    width: 100%;
    position: fixed;
    top: 27%;
    transition: all 60s linear;
    animation: rotateReverse 60s linear 0s infinite;
  }
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(90deg);
    }
  }
  @keyframes rotateReverse {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-90deg);
    }
  }
}
</style>
